<style type="text/css" media="screen">
    @import "/stylesheets/estilos/datePicker.css";
    @import "/stylesheets/estilos/tablesorter.blue/style.css";
</style>

<h2 class="layout">Novo Transporte</h2>
<%= error_messages_for :transporte %>
<%form_for(@transporte) do |f| %>

  <div style="clear:both; float:right; width: 65%; padding-bottom: 10px;">
    <label for="transporte_ndt" style="font-weight:bold;">NDT:</label>
    <%= f.text_field :ndt, :class => "field",
      :onkeyup => "javascript:somente_numero(this);", :style => "padding:3px; width:200px;"%>
  </div>

  <hr class="clear-contentunit">
  <p/>

    <%tableize @deposito,
      :generate_css => false,
      :html => {:class => "tableize_cadtransporte"},
      :cols => 2 do |d|%>
      <p>
        <span class="tableize_checkbox" style="width:20%; font-weight:bold;">
          <%= check_box "deposito_#{d[1]}", "checkbox",{:onclick => "javascript:habilitaTextField(#{d[1]})"},d[1]%>&nbsp;<%=d[0]%>
        </span>

      </p>
      <div style="clear:both"></div>
      <p/>

        <span class="tableize_textfiled" style="width:15%;">
          &nbsp;PARES:
          <%= text_field "deposito_#{d[1]}", "quantidade",{
            :size => 8,
            :maxlength => 8,
            :disabled => true,
            :onkeyup => "javascript:somente_numero(this); soma_pares(#{@deposito.size});"}%>
        </span>

        <span class="tableize_textfiled" style="width:15%;">
          &nbsp;CXS:
          <%= text_field "deposito_#{d[1]}", "quantidade_cxs",{
            :size => 8,
            :maxlength => 8,
            :disabled => true,
            :onkeyup => "javascript:somente_numero(this); soma_cxs(#{@deposito.size});"}%>
        </span>

        <span class="tableize_textfiled" style="width:15%;">
          &nbsp;BOX:
          <%= select "deposito_#{d[1]}", "box", Array.new(d[2]){|n| n + 1},{:include_blank => true}, {:disabled => true} %>
        </span>
      </p>
    <%end%>

    <hr class="clear-contentunit">
    <br/>

    <div class="column3-unit-left">
      <div style="width:90%; height:30px;">
        <label for="transporte_destino" style="float:left;">DESTINO:</label>
        <%= select "transporte", "destino", @destino, {:include_blank => true}, :style => "float:right; width: 105px;"  %>
      </div>

      <div style="width:90%; height:30px;">
        <label for="transporte_transportadora" style="float:left;">TRANSPORTADORA:</label>
        <%= select "transporte", "transportadora", @transportadora, {:include_blank => true}, :style => "float:right; width: 105px;"  %>
      </div>

      <div style="width:90%; height:30px;">
        <label for="transporte_tipo" style="float:left;">TIPO:</label>
        <%= select "transporte", "tipo", @tipo, {:include_blank => true}, :style => "float:right; width: 105px;"  %>
      </div>
    </div>

    <div class="column3-unit-middle">
      <div style="width:90%; height:30px;">
        <label for="transporte_created_at" style="float:left;">DATA:</label>
        <%=f.text_field :created_at,
          :order => [:day, :month,:year],
          :maxlength => 10,
          :onFocus =>"javascript:this.value = ''",
          :onkeypress => "Mascara('DATA',this,event);",
          :style => "float:right; width: 100px;"  %>
      </div>

      <div style="width:90%; height:30px;">
        <label for="transporte_volume" style="float:left;">VOLUME:</label>
        <%= f.text_field "m",
          :maxlength => 10,
          :size => 10,
          :class => "field",
          :onkeyup => "javascript:somente_numero(this);",
          :style => "float:right; width: 100px;"  %>
      </div>

      <div style="width:90%; height:30px;">
        <label for="transporte_peso" style="float:left;">PESO:</label>
        <%= f.text_field "peso",
          :maxlength => 10,
          :size => 10,
          :class => "field" ,
          :onkeyup => "javascript:somente_numero(this);",
          :style => "float:right; width: 100px;"  %>
      </div>
    </div>

    <div class="column3-unit-right">
      <div style="width:90%; height:30px;">
        <label for="transporte_pares" style="float:left;">PARES:</label>
        <%= f.text_field "pares",
          :maxlength => 10,
          :size => 10,
          :class => "field",
          :readonly => true,
          :onkeyup => "javascript:somente_numero(this);",
          :style => "float:right; width: 95px; font-weight: bold; font-size:12px; padding:2px; "  %>
      </div>

      <div style="width:90%; height:30px;">
        <label for="transporte_cxs" style="float:left;">CXS:</label>
        <%= f.text_field "cxs",
          :maxlength => 10,
          :size => 10,
          :class => "field" ,
          :readonly => true,
          :onkeyup => "javascript:somente_numero(this);",
          :style => "float:right; width: 95px; font-weight: bold; font-size:12px; padding:2px; "  %>
      </div>
    </div>
    <hr class="clear-contentunit" />
    <br/>

    <div class="column2-unit-left">
      <div style="width:90%; height:30px;">
        <label for="transporte_obs_trans" style="float:left;">OBS:</label>
        <%= f.text_field "obs_trans",
          :maxlength => 50,
          :size => 50,
          :class => "field",
          :style => "float:right;", :size => '40'%>
      </div>
    </div>

    <div class="column2-unit-right">
      <div style="width:90%; height:30px;">
        <label for="transporte_etq" style="float:left;">ETQ:</label>
        <%= check_box_tag "etiqueta", false, false, :style => "float:left; margin-left:10%;"%>
      </div>
    </div>

    <hr class="clear-contentunit" />
    <br/>
    <%= button_to_function "Salvar", "salvar(#{@deposito.size})" %>
  </p>
<%end%>

<script type="text/javascript">
    // Campos Obrigatórios
    //Nº do Transporte
    var transporte_ndt = new LiveValidation('transporte_ndt',{validMessage: "√"} );
    transporte_ndt.add( Validate.Presence, {failureMessage: "X"});

    //Data de criação
    var transporte_created_at = new LiveValidation('transporte_created_at',{validMessage: "√"} );
    transporte_created_at.add( Validate.Presence, {failureMessage: "X"});

    /*//Pares
    var transporte_pares = new LiveValidation('transporte_pares',{validMessage: "√"} );
    transporte_pares.add( Validate.Presence, {failureMessage: "X"});

    //Cxs
    var transporte_cxs = new LiveValidation('transporte_cxs',{validMessage: "√"} );
    transporte_cxs.add( Validate.Presence, {failureMessage: "X"});*/

    //Volume
    var transporte_m = new LiveValidation('transporte_m',{validMessage: "√"} );
    transporte_m.add( Validate.Presence, {failureMessage: "X"});

    //Peso
    var transporte_peso = new LiveValidation('transporte_peso',{validMessage: "√"} );
    transporte_peso.add( Validate.Presence, {failureMessage: "X"});

    //Destino
    var transporte_destino = new LiveValidation('transporte_destino',{validMessage: "√"} );
    transporte_destino.add( Validate.Presence, {failureMessage: "X"});

    //Tipo
    var transporte_tipo = new LiveValidation('transporte_tipo',{validMessage: "√"} );
    transporte_tipo.add( Validate.Presence, {failureMessage: "X"});

    //Transportadora
    var transporte_transportadora = new LiveValidation('transporte_transportadora',{validMessage: "√"} );
    transporte_transportadora.add( Validate.Presence, {failureMessage: "X"});

    function salvar(tamanho){
        var resultado = new Boolean(false);
        var marcado = new Boolean(false);
        for (var i=1;i<=tamanho;i++){
            ch = document.getElementById('deposito_' + i + '_checkbox');
            if (ch != null && ch.checked == true){
                marcado = true;
            }
        }
        if (marcado == true){
            for (var i=1;i<=tamanho;i++){
                txt_quantidade = document.getElementById('deposito_' + i + '_quantidade');
                txt_quantidade_cxs = document.getElementById('deposito_' + i + '_quantidade_cxs');
                txt_box = document.getElementById('deposito_' + i + '_box');
                if (txt_quantidade != null && txt_quantidade.disabled == false && txt_quantidade.value == ""){
                    resultado = true;
                }
                if(txt_box != null && txt_box.disabled == false && txt_box.value == ""){
                    resultado = true;
                }
                if (txt_quantidade_cxs != null && txt_quantidade_cxs.disabled == false && txt_quantidade_cxs.value == ""){
                    resultado = true;
                }
            }
            if (resultado == true){
                window.alert("É nencessário que seja preenchito todas as informações sobre os depósitos!");
            }else {
                document.forms[0].submit();
            }
        }else {
            window.alert("Escolha pelo menos um Depósito.");
        }
    }
    function soma_pares(tamanho){
        var resultado = new Number(0);
        for (var i=1;i<=tamanho;i++){
            var nome = 'deposito_' + i + '_quantidade';
            txt = document.getElementById(nome);
            if (txt != null && txt.disabled == false && txt.value != ""){
                var valor = new Number(txt.value);
                resultado = resultado + valor;
            }
        }
        pares = document.getElementById('transporte_pares');
        if (resultado != 0){
            pares.value = resultado;
        }else{
            pares.value = "";
        }
    }

    function soma_cxs(tamanho){
        var resultado = new Number(0);
        for (var i=1;i<=tamanho;i++){
            txt = document.getElementById('deposito_' + i + '_quantidade_cxs');
            if (txt != null && txt.disabled == false && txt.value != ""){
                var valor = new Number(txt.value);
                resultado = resultado + valor;
            }
        }
        cxs = document.getElementById('transporte_cxs');
        if (resultado != 0){
            cxs.value = resultado;
        }else{
            cxs.value = "";
        }
    }

    function habilitaTextField(campo_id){
        var id_qua = "deposito_"+ campo_id + "_quantidade";
        var id_qua_cxs = "deposito_"+ campo_id + "_quantidade_cxs";
        var id_box = "deposito_" + campo_id + "_box";
        ch = document.getElementById("deposito_"+campo_id+"_checkbox");
        txt_qua = document.getElementById(id_qua);
        txt_qua_cxs = document.getElementById(id_qua_cxs);
        txt_box = document.getElementById(id_box);
        pares = document.getElementById('transporte_pares');

        if (ch.checked){
            txt_qua.disabled = false;
            txt_qua_cxs.disabled = false;
            txt_box.disabled = false
        }else{
            txt_qua.disabled = true;
            txt_qua.value = "";
            txt_qua_cxs.disabled = true;
            txt_qua_cxs.value = "";
            txt_box.disabled = true;
            txt_box.value = "";
            soma_pares(<%=@deposito.size%>);
            soma_cxs(<%=@deposito.size%>);
        }
    }
    function somente_numero(campo){
        var digits="0123456789"
        var campo_temp
        for (var i=0;i<campo.value.length;i++){
            campo_temp=campo.value.substring(i,i+1)
            if (digits.indexOf(campo_temp)==-1){
                campo.value = campo.value.substring(0,i);
                break;
            }
        }
    }

    function Mascara(tipo, campo, teclaPress) {
        if (window.event)
        {
            var tecla = teclaPress.keyCode;
        } else {
            tecla = teclaPress.which;
        }

        var s = new String(campo.value);
        // Remove todos os caracteres à seguir: ( ) / - . e espaço, para tratar a string denovo.
        s = s.replace(/(\.|\(|\)|\/|\-| )+/g,'');
        tam = s.length + 1;
        if ( tecla != 9 && tecla != 8 ) {
            switch (tipo)
            {
                case 'CPF' :
                    if (tam > 3 && tam < 7)
                        campo.value = s.substr(0,3) + '.' + s.substr(3, tam);
                    if (tam >= 7 && tam < 10)
                        campo.value = s.substr(0,3) + '.' + s.substr(3,3) + '.' + s.substr(6,tam-6);
                    if (tam >= 10 && tam < 12)
                        campo.value = s.substr(0,3) + '.' + s.substr(3,3) + '.' + s.substr(6,3) + '-' + s.substr(9,tam-9);
                    break;
                case 'CNPJ' :

                    if (tam > 2 && tam < 6)
                        campo.value = s.substr(0,2) + '.' + s.substr(2, tam);
                    if (tam >= 6 && tam < 9)
                        campo.value = s.substr(0,2) + '.' + s.substr(2,3) + '.' + s.substr(5,tam-5);
                    if (tam >= 9 && tam < 13)
                        campo.value = s.substr(0,2) + '.' + s.substr(2,3) + '.' + s.substr(5,3) + '/' + s.substr(8,tam-8);
                    if (tam >= 13 && tam < 15)
                        campo.value = s.substr(0,2) + '.' + s.substr(2,3) + '.' + s.substr(5,3) + '/' + s.substr(8,4)+ '-' + s.substr(12,tam-12);
                    break;

                case 'TEL' :
                    if (tam > 2 && tam < 4)
                        campo.value = '(' + s.substr(0,2) + ') ' + s.substr(2,tam);
                    if (tam >= 7 && tam < 11)
                        campo.value = '(' + s.substr(0,2) + ') ' + s.substr(2,4) + '-' + s.substr(6,tam-6);
                    break;
                case 'DATA' :
                    if (tam > 2 && tam < 4)
                        campo.value = s.substr(0,2) + '/' + s.substr(2, tam);
                    if (tam > 4 && tam < 10)
                        campo.value = s.substr(0,2) + '/' + s.substr(2,2) + '/' + s.substr(4,tam-4);
                    break;
            }
        }
    }
</script>